<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="无聊人前端导航，编程学习，实用工具，收集有用的开发网站">
    <meta name="keywords" content="前端，导航，HTML5，CSS3，JS，web编程，学习文档，实用网站">
    <meta name="author" content="sjm">
    <title>无聊人</title>
    <link rel="icon" href="https://lyking90.oss-cn-shenzhen.aliyuncs.com/boringman/logo.png" />
    <link rel="stylesheet" href="../css/boringman.css" />
  
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <!-- jquery -->
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <!-- vue.js开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <style></style>
  </head>
  <body>
    <header>
      <!-- 顶部导航 -->
      <div class="container">
        <div class="navbar">
          <a href="home.html" class="logo">boringman</a>
          <label for="toggle-nav" 
            ><i class="fa fa-tasks" aria-hidden="true"></i
          ></label>
          <input type="checkbox" name="toggle-nav" id="toggle-nav" />
          <div class="collapse">
            <ul class="links">
              <li><a href="home.html">主页</a></li>
              <li><a href="aboutme.html">关于我</a></li>
              <li><a href="#" class="support">赞赏支持</a></li>
            </ul>

            <div class="form">
              <a href="login.html">登录</a>
              <a href="register.html" class="form-bg">注册</a>
            </div>
          </div>
        </div>
      </div>
    </header>

    <main>
      <!-- 侧边栏 -->

      <div class="navigation">
        <ul>
          <li>
            <a href="#web_heji">
              <span class="icon"
                ><i class="fa fa-home" aria-hidden="true"></i
              ></span>
              <span class="title">网站合集</span>
            </a>
          </li>
          <li>
            <a href="#web_study">
              <span class="icon"
                ><i class="fa fa-graduation-cap" aria-hidden="true"></i
              ></span>
              <span class="title">学习教育</span>
            </a>
          </li>
          <li>
            <a href="#web_document">
              <span class="icon"
                ><i class="fa fa-book" aria-hidden="true"></i
              ></span>
              <span class="title">学习文档</span>
            </a>
          </li>
          <li>
            <a href="#web_community">
              <span class="icon"
                ><i class="fa fa-commenting-o" aria-hidden="true"></i
              ></span>
              <span class="title">开源社区</span>
            </a>
          </li>
          <li>
            <a href="#web_software">
              <span class="icon"
                ><i class="fa fa-heart" aria-hidden="true"></i
              ></span>
              <span class="title">实用软件</span>
            </a>
          </li>
          <li>
            <a href="#web_tool">
              <span class="icon"
                ><i class="fa fa-briefcase" aria-hidden="true"></i
              ></span>
              <span class="title">辅助工具</span>
            </a>
          </li>
          <li>
            <a href="#web_server">
              <span class="icon"
                ><i class="fa fa-server" aria-hidden="true"></i
              ></span>
              <span class="title">域名|服务器</span>
            </a>
          </li>
          <li>
            <a href="#web_employee">
              <span class="icon"
                ><i class="fa fa-building" aria-hidden="true"></i></span>
              <span class="title">求职网站</span>
            </a>
          </li>

            <li>
            <a href="#web_tool">
              <span class="icon"
                ><i class="fa fa-briefcase" aria-hidden="true"></i
              ></span>
              <span class="title">辅助工具</span>
            </a>
          </li>
          <li>
            <a href="#web_ui">
              <span class="icon"
                ><i class="fa fa-star" aria-hidden="true"></i
              ></span>
              <span class="title">前端框架</span>
            </a>
          </li>
          <li>
            <a href="#web_video">
              <span class="icon"
                ><i class="fa fa-video-camera" aria-hidden="true"></i
              ></span>
              <span class="title">影视资源</span>
            </a>
          </li>
          <li>
            <a href="#web_image">
              <span class="icon"
                ><i class="fa fa-image" aria-hidden="true"></i
              ></span>
              <span class="title">图片素材</span>
            </a>
          </li>
          <li>
            <a href="#web_other">
              <span class="icon"
                ><i class="fa fa-question-circle" aria-hidden="true"></i
              ></span>
              <span class="title">其他网站</span>
            </a>
          </li>
        </ul>
      </div>

      <!-- 侧边栏控制按钮 -->
      <!-- <div class="toggle" onclick="toggleMenu()">
       
    </div> -->

      <!-- 中间主体区域 -->

      <div class="right">

        

        <!-- 星星 -->
        <div class="stars">
          <i class="fa fa-star" aria-hidden="true"></i>
        </div>
        <!-- 主要区域 -->
        <div class="content" id="app">
          <!-- 网站分类卡片 -->
          <template v-for="web in webcard">
            <div class="card">
              <div class="card-header">
                <h3 :id="web.webid">{{web.webtitle}}</h3>
              </div>

              <div class="card-body">
                <!-- 网站卡片 -->

                <template v-for="sweb in web.webs">
                  <a :href="sweb.url" target="_blank">
                    <div class="web-card">
                      <div class="web-card-icon">
                        <img v-if="sweb.icon==null" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596623959415&di=4df4c007dac3040b62c160a9e2a0c7cf&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Felement_origin_min_pic%2F00%2F12%2F93%2F0256aafdf7ee6cf.jpg" alt="">
                        <img  v-else v-bind:src="sweb.icon" alt="图标" />
                      </div>
                      <div class="web-card-right">
                        <div class="web-card-name">
                          <p>{{sweb.name}}</p>
                        </div>
                        <div class="web-card-description">
                          <p>
                            {{sweb.description}}
                          </p>
                        </div>
                      </div>
                    </div>
                  </a>
                </template>

                <!-- 网站卡片end -->
              </div>

              <div class="card-footer"></div>
            </div>
          </template>
          <!-- 分类卡片end -->
        </div>

        <!-- 右侧悬浮图标 -->
        <div class="tools">
          <ul>
            <li id="gotoTop">
              <i class="fa fa-arrow-up" aria-hidden="true" title="返回顶部"></i>
            </li>
            <li class="weixin"><i class="fa fa-weixin" aria-hidden="true"></i></li>
            <li><i class="fa fa-cloud" aria-hidden="true"></i></li>
            <li id="black1"><i class="fa fa-moon-o" aria-hidden="true"></i></li>
           
          </ul>
          <!-- 和风天气 -->
          <div id="he-plugin-simple"></div>
        </div>

        <!-- 底部footer -->
        <footer>
          <div>© 2021 无聊人 www.boringman.vip</div>
          <div>乐于分享，分享快乐</div>
          <div>
          <ul class="social-tool">
            <li><a href="https://space.bilibili.com/4624209" target="_blank"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596737666913&di=59888a902db1fb3eb8b046250ded7a9d&imgtype=0&src=http%3A%2F%2Fupload.chinamac.com%2F2015%2F0108%2F20150108103418386.png" alt="bilibili"></a></li>
            <li><a href="https://github.com/lyking90/boringman.git" target="_blank"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1969454436,2593720224&fm=26&gp=0.jpg" alt="github"></a></li>
            <li><a href="https://gitee.com/lyking90/boringman.git" target="_blank"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1272163934,1051423405&fm=26&gp=0.jpg" alt="gitee"></a></li>
          </ul>
          </div>
       
        </footer>

        <div></div>
      </div>
    </main>

    <script type="text/javascript">
      
$("#black1").click(function(){
		var s = $(this).html();
		if (s=="夜") {
			$('body').css("background-color","#30336b");
			$('body').css("opacity","0.8")
			$('body').css("-moz-opacity","0.7")
			$('body').css("filter","alpha(opacity=50)")
      
      $('.card').css("background-image","linear-gradient(to top, #5ee7df 0%, #b490ca 100%)")
      $('.web-card-description>p').css("color","white")
      $('.fa-tasks').css("color","white")
			$(this).html("白");
		}else{
			$('body').css("background-color","");
			$('body').css("opacity","")
			$('body').css("-moz-opacity","")
			$('body').css("filter","")
     
      $('.card').css("background-image","")
      $('.web-card-description>p').css("color","")
      $('.fa-tasks').css("color","")
			$(this).html("夜");
		}
	});

    </script>

    <script src="../js/boringman.js"></script>
    <script src="https://widget.heweather.net/simple/static/js/he-simple-common.js?v=1.1"></script>
  </body>
</html>
